import React, { useState, useContext, useEffect } from "react";
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Alert,
  Text,
  TextInput,
} from "react-native";
import { Title, Caption, Drawer } from "react-native-paper";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { FontAwesome } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";
import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
import { useDispatch, useSelector } from "react-redux";
import { signout, updateMessage } from "../../store/actions";
import Dropdown from "../../components/dropdown";
import LoadingBar from "../../components/InterView/LoadingBar";

export function DrawerContent(props) {
  const user = useSelector((state) => state.authR.user);
  const dispatch = useDispatch();
  const [isEditable, setIsEditable] = useState(false);
  const [name, setName] = useState(user.name);
  const [account, setAccount] = useState(user.account);
  const [group, setGroup] = useState(user.group);
  const [role, setRole] = useState(user.role);
  const [roleId, setRoleId] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const roleGroup = ["调研员", "管理员", "审核员"];

  useEffect(() => {
    if (user.role === "user") {
      setRoleId(0);
    } else if (user.role === "admin") {
      setRoleId(1);
    } else {
      setRoleId(2);
    }
  }, [user]);

  const onConfirm = () => {
    Alert.alert("提示", "确定保存所修改信息吗?", [
      {
        text: "取消",
        style: "cancel",
      },
      {
        text: "确定",
        onPress: async () => {
          let role = roleId === 0 ? "user" : roleId === 1 ? "admin" : "auditor";
          let item;
          if (account.length == 0 || name.length == 0) {
            Alert.alert("提示", "保存修改时输入内容不能为空", [
              { text: "确定" },
            ]);
            return;
          }
          if (role !== "auditor" && group.length == 0) {
            Alert.alert("提示", "保存修改时输入内容不能为空", [
              { text: "确定" },
            ]);
            return;
          }
          if (role === "auditor") {
            // console.log("进来了");
            item = {
              //审核员没有组
              _id: user._id,
              account: account,
              name: name,
              group: "",
              role: role,
            };
          } else {
            item = {
              _id: user._id,
              account: account,
              name: name,
              group: group,
              role: role,
            };
          }
          dispatch(updateMessage(item, setIsLoading, setIsEditable));
        },
      },
    ]);
  };

  return (
    <View style={{ flex: 1 }}>
      <LoadingBar visible={isLoading} />
      <DrawerContentScrollView {...props}>
        <View style={styles.drawerContent}>
          <View style={styles.userInfoSection}>
            <View style={{ flexDirection: "row", marginTop: 15 }}>
              <FontAwesome name="user-circle-o" size={50} color="#333" />
              <View style={{ flexDirection: "column", marginLeft: 15 }}>
                <Title style={styles.title}>{user.name}</Title>
                <Caption style={styles.caption}>{user.account}</Caption>
              </View>
            </View>
          </View>
          <View style={styles.drawerSection}>
            {!isEditable ? (
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "flex-end",
                }}
              >
                <TouchableOpacity
                  style={{
                    paddingHorizontal: 20,
                    paddingVertical: 5,
                  }}
                  onPress={() => setIsEditable((pre) => setIsEditable(!pre))}
                >
                  <AntDesign name="edit" size={18} color="black" />
                </TouchableOpacity>
              </View>
            ) : (
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                }}
              >
                <TouchableOpacity
                  style={{
                    paddingHorizontal: 20,
                    paddingVertical: 5,
                  }}
                  onPress={() => setIsEditable(false)}
                >
                  <AntDesign name="closecircleo" size={18} color="#F47C68" />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    paddingHorizontal: 20,
                    paddingVertical: 5,
                  }}
                  onPress={() => onConfirm()}
                >
                  <AntDesign name="checkcircleo" size={18} color="#76B438" />
                </TouchableOpacity>
              </View>
            )}

            <View style={styles.group}>
              <AntDesign name="carryout" size={18} color="black" />
              <Text style={{ marginLeft: 25, marginRight: 20, color: "#999" }}>
                姓名
              </Text>
              {!isEditable ? (
                <Text style={{ color: "#444" }}>{user.name}</Text>
              ) : (
                <View style={{ flex: 1 }}>
                  <TextInput
                    style={styles.inputBox}
                    value={name}
                    placeholder="请输入姓名"
                    onChangeText={(text) => {
                      setName(text);
                    }}
                  />
                </View>
              )}
            </View>
            <View style={styles.group}>
              <AntDesign name="user" size={18} color="black" />
              <Text style={{ marginLeft: 25, marginRight: 20, color: "#999" }}>
                账号
              </Text>
              {!isEditable ? (
                <Text style={{ color: "#444" }}>{user.account}</Text>
              ) : (
                <View style={{ flex: 1 }}>
                  <TextInput
                    style={styles.inputBox}
                    value={account}
                    placeholder="请输入账号"
                    onChangeText={(text) => {
                      setAccount(text);
                    }}
                  />
                </View>
              )}
            </View>
            {user.role !== "auditor" && !isEditable && (
              <View style={styles.group}>
                <AntDesign name="team" size={18} color="black" />
                <Text
                  style={{ marginLeft: 25, marginRight: 20, color: "#999" }}
                >
                  组号
                </Text>
                <Text style={{ color: "#444" }}>{user.group}</Text>
              </View>
            )}

            {isEditable && roleId !== 2 && (
              <View style={styles.group}>
                <AntDesign name="team" size={18} color="black" />
                <Text
                  style={{ marginLeft: 25, marginRight: 20, color: "#999" }}
                >
                  组号
                </Text>
                <View style={{ flex: 1 }}>
                  <TextInput
                    style={styles.inputBox}
                    value={group}
                    placeholder="请输入组号"
                    onChangeText={(text) => {
                      setGroup(text);
                    }}
                  />
                </View>
              </View>
            )}

            <View style={styles.group}>
              <AntDesign name="flag" size={18} color="black" />

              <Text style={{ marginLeft: 25, marginRight: 20, color: "#999" }}>
                角色
              </Text>
              <Text style={{ color: "#444" }}>
                {user.role === "user"
                  ? "调研员"
                  : user.role === "admin"
                  ? "管理员"
                  : "审核员"}
              </Text>
              {/* {!isEditable ? (
                <Text style={{ color: "#444" }}>
                  {user.role === "user"
                    ? "调研员"
                    : user.role === "admin"
                    ? "管理员"
                    : "审核员"}
                </Text>
              ) : (
                <Dropdown
                  ifFirst={1}
                  initialValues={{
                    initKey: roleId,
                    initOptions: roleGroup,
                  }}
                  initialStyles={{
                    valueWith: 120,
                    valueMarginTop: 0,
                    optionsWidth: 110,
                    optionsBackGroundColor: "#eee",
                    optionsBorderColor: "#ccc",
                  }}
                  onSelect={(item, value) => {
                    setRoleId(value);
                  }}
                />
              )} */}
            </View>
          </View>
        </View>
      </DrawerContentScrollView>
      {!isEditable && (
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem
            icon={(color, size) => (
              <Icon name="exit-to-app" color={color} size={size} />
            )}
            label="退 出"
            onPress={() => dispatch(signout())}
          ></DrawerItem>
        </Drawer.Section>
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  drawerContent: {
    // flex: 1,
  },
  userInfoSection: {
    paddingLeft: 20,
    marginTop: 30,
  },
  title: {
    fontSize: 16,
    marginTop: 3,
    fontWeight: "bold",
  },
  caption: {
    fontSize: 14,
    lineHeight: 14,
  },
  row: {
    marginTop: 20,
    flexDirection: "row",
    alignItems: "center",
  },
  section: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 15,
  },
  paragraph: {
    fontWeight: "bold",
    marginRight: 3,
  },
  drawerSection: {
    marginTop: 40,
  },
  bottomDrawerSection: {
    marginBottom: 15,
    borderTopColor: "#f4f4f4",
    borderTopWidth: 1,
  },
  preference: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  group: {
    flexDirection: "row",
    padding: 16,
    alignItems: "center",
    borderBottomColor: "#f4f4f4",
    borderBottomWidth: 1,
  },
  inputBox: {
    borderColor: "#ddd",
    borderWidth: 1,

    borderRadius: 2,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  inputLine: {
    borderBottomColor: "#ddd",
    borderBottomWidth: 1,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderLeftWidth: 1,
    borderLeftColor: "#ddd",
  },
});
